<template>
  <div>
    <!--    案卷信息-->
    <el-card style="height: 780px" v-loading="volumeLoading">
      <div slot="header" class="search-header">
        <div class="show_title">案卷目录：</div>
        <el-input
          v-model="volumeQueryParams.vname"
          placeholder="搜索案卷"
          clearable
          @keyup.enter.native="searchVolume"
          class="my_input"
        />
        <div class="button-group">
          <el-button type="primary" icon="el-icon-search" size="mini" @click="searchVolume">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetVolume">重置</el-button>
        </div>
      </div>
      <div class="engs-container" ref="volumeContainer">
        <div
          class="eng-row"
          v-for="volume in volumeList"
          :key="volume.id"
          @click="selectVolume(volume)"
          :class="{ selected: volume === selectedVolume }"
        >
          <i class="folder-icon volume-folder-icon"></i>
          <div slot="reference" class="name-wrapper">
            <span size="medium" class="folder-name" style="display:inline-block;width:100%;word-wrap:break-word;white-space:normal;">{{ volume.vname }}</span>
          </div>
        </div>
      </div>
      <div class="pagination-container">
        <!-- 分页信息 -->
        <el-pagination
          @size-change="handleSizeChangeVolume"
          @current-change="handleCurrentChangeVolume"
          :current-page.sync="volumeQueryParams.pageNum"
          :page-size.sync="volumeQueryParams.pageSize"
          layout="total, prev, pager, next, jumper"
          :pager-count="5"
          :total="volumeTotal"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>


<script>
import {listVolumeinfo} from "@/api/system/volumeinfo";

export default {
  props: {
    selectedOneEng: Object,
    topNode: Object
  },
  data() {
    return {
      volumeList: [], //案卷列表
      volumeTotal: 0, //案卷总数
      selectedVolume: null,
      volumeQueryParams: {
        pageNum: 1,
        pageSize: 20,
        regprojid: null,
        vname: null,
        topnode: null,
      },
      volumeLoading: false,
    };
  },
  watch: {
    selectedOneEng(newValue) {
      this.volumeQueryParams.regprojid = newValue.id;
      this.getVolumeList();
    },
    topNode: {
      handler (newValue, oldValue) {
        console.log(newValue)
        this.volumeQueryParams.topnode = newValue.topnode[0];
        this.getVolumeList();
      },
      deep: true
    }
  },
  methods: {
    //获取案卷信息
    getVolumeList() {
      this.volumeLoading = true;
      this.fileList = [];
      listVolumeinfo(this.volumeQueryParams)
        .then((response) => {
          setTimeout(() => {
            this.volumeList = response.rows;
            this.volumeTotal = response.total;
            this.volumeLoading = false;
          }, 300);
        })
        .catch((error) => {
          this.$message.error("获取案卷信息失败:" + error);
          this.volumeLoading = false;
        });
    },
    searchVolume() {
      this.volumeQueryParams.pageNum = 1;
      this.getVolumeList();
    },
    resetVolume() {
      this.$emit('resetVolume')
      this.volumeQueryParams.vname = null;
      this.selectedVolume = null;
      this.getVolumeList();
    },
    selectVolume(volume) {
      this.selectedVolume = volume;
      this.$emit('selectVolume', volume);
    },
    handleSizeChangeVolume(pageSize) {
      this.volumeQueryParams.pageSize = pageSize;
      this.getVolumeList();
    },
    handleCurrentChangeVolume(currentPage) {
      this.volumeQueryParams.pageNum = currentPage;
      this.getVolumeList();
    },
  },
};
</script>

<style>
/* 公共样式 */
.search-header {
  display: flex;
  align-items: center;
}

.my_input {
  margin-left: auto;
  width: 30%;
  margin-right: 5px;
}

.dialog-content {
  display: flex;
  flex-direction: column;
}

.my_button {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
  margin-left: 85%;
}

.button-group {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.engs-container {
  height: 600px;
  overflow-y: auto;
}

.eng-row {
  flex-basis: 100%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.eng-row:hover {
  cursor: pointer;
  background-color: #e5f3ff;
}

.pagination-container {
  margin-top: 10px;
}

.folder-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  background-size: cover;
}

.folder-name {
  flex-grow: 1;
  font-size: 14px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.show_title {
  font-weight: bold;
  font-size: 1.2rem;
  color: rgb(26, 115, 198);
}

.dialog-content {
  display: flex;
  flex-direction: column;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* 不同图标的样式 */
.eng-folder-icon {
  background-image: url("~@/assets/icons/folder/eng-icon.png");
}

.volume-folder-icon {
  background-image: url("~@/assets/icons/folder/volume-icon.png");
}

.file-folder-icon {
  background-image: url("~@/assets/icons/folder/file-icon.png");
}

/* 选中状态的样式 */
.selected {
  /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);*/
  background-color: #cce8ff;
}
</style>

